<template>
  <a-modal width="800px" :footer="null" :maskClosable="false" :closable="false" :mask="false" v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden', zIndex: 999999 }">
    <template #title>
      <div class="titleBox"
        style="display: flex; align-items:center;position: relative;justify-content: space-between; min-height: 40px;">
        <div class="closeBox" @click="close">
          <div class="closeIcon"></div>
        </div>
        <div class="title" v-if="data"> {{ data.name }} </div>
        <div class="rightBox">
          <div class="btn" @click="xfrw('1')">下发任务</div>
          <div class="btn" @click="xfrw('2')">无人机任务</div>
        </div>
      </div>
    </template>
    <div style="padding:0 10px 10px 10px;" v-if="data">
      <a-row :gutter="10">
        <a-col :span="14">
          <div class="content">
            <div style="font-size: 12px; padding-bottom: 10px;border-bottom: 1px solid #FFFFFF26;">
              {{ data.info }}
            </div>
            <div class="title">网格动态</div>
            <mTable :titleData="titleData" :valueData="valueData"></mTable>
            <modalPage ref="pageRef" :pagesize="searchData.pagesize" @pageChange="pageChange" :total="total">
            </modalPage>
          </div>
        </a-col>
        <a-col :span="10">
          <div class="content" style="height: 100%;">
            <div class="title" style="padding: 0 0 10px 0;">网格人员组织架构图</div>
            <div style="font-size: 10px;padding: 0  0 10px  0;">网格长</div>
            <div style="flex: 1; display: flex; align-items: center; flex-wrap: wrap;">
              <div class="item" v-if="data.wgz_list.length > 0">
                <!-- <a-avatar size="small" src="/img/myimg/avatar.png">
                      </a-avatar> -->
                <div
                  :style="{ backgroundImage: 'url(' + (data.wgz_list[0].image ? data.wgz_list[0].image : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height:30px; background-size: 30px 30px; border-radius: 50%;"></div>
                <div style="flex:1;">
                  <div style="margin-left: 5px; font-size:10px; display:flex; align-items:center;">{{
                    data.wgz_list[0].name
                    }}<img v-if="data.wgz_list[0].is_dangyuan === 1" src="/img/myimg/danghui.png"
                      style="width:12px; height:13px; margin-left:5px; margin-bottom: 2px;" /></div>
                  <div style="margin-left: 5px; font-size:10px">{{ data.wgz_list[0].phone }}</div>
                </div>
              </div>
            </div>
            <div style="font-size: 10px;padding: 0  0 10px  0;">网格员</div>
            <div style="flex: 1; display: flex; align-items: center; flex-wrap: wrap;">
              <div class="item" v-for="(item, i) in data.wgy_list" :key="i">
                <!-- <a-avatar size="small" src="/img/myimg/avatar.png">
                      </a-avatar> -->
                <div :style="{ backgroundImage: 'url(' + (item.image ? item.image : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height:30px; background-size: 30px 30px; border-radius: 50%;"></div>
                <div style="flex:1;">
                  <div style="margin-left: 5px; font-size:10px; display:flex; align-items:center;">{{ item.name }}<img
                      v-if="item.is_dangyuan === 1" src="/img/myimg/danghui.png"
                      style="width:12px; height:13px; margin-left:5px; margin-bottom: 2px;" /></div>
                  <div style="margin-left: 5px; font-size:10px">{{ item.phone }}</div>
                </div>
              </div>
            </div>
            <div style="font-size: 10px;padding: 0  0 10px  0;">物业负责人</div>
            <div style="flex: 1; display: flex; align-items: center; flex-wrap: wrap;">
              <div class="item" v-for="(item, i) in data.wyfzr_list" :key="i">
                <!-- <a-avatar size="small" src="/img/myimg/avatar.png">
                      </a-avatar> -->
                <div :style="{ backgroundImage: 'url(' + (item.image ? item.image : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height:30px; background-size: 30px 30px; border-radius: 50%;"></div>
                <div style="flex:1;">
                  <div style="margin-left: 5px; font-size:10px; display:flex; align-items:center;">{{ item.name }}<img
                      v-if="item.is_dangyuan === 1" src="/img/myimg/danghui.png"
                      style="width:12px; height:13px; margin-left:5px; margin-bottom: 2px;" /></div>
                  <div style="margin-left: 5px; font-size:10px">{{ item.phone }}</div>
                </div>
              </div>
            </div>
            <div style="font-size: 10px; padding: 0  0 10px  0;">业委会负责人</div>
            <div style="flex: 1; display: flex; align-items: center; flex-wrap: wrap;">
              <div class="item" v-for="(item, i) in data.ywhfzr_list" :key="i">
                <!-- <a-avatar size="small" src="/img/myimg/avatar.png">
                      </a-avatar> -->
                <div :style="{ backgroundImage: 'url(' + (item.image ? item.image : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height:30px; background-size: 30px 30px; border-radius: 50%;"></div>
                <div style="flex:1;">
                  <div style="margin-left: 5px; font-size:10px; display:flex; align-items:center;">{{ item.name }}<img
                      v-if="item.is_dangyuan === 1" src="/img/myimg/danghui.png"
                      style="width:12px; height:13px; margin-left:5px; margin-bottom: 2px;" /></div>
                  <div style="margin-left: 5px; font-size:10px">{{ item.phone }}</div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>

    </div>
  </a-modal>
</template>
<script setup>
import $api from "@/utils/request.js"
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
import mTable from "../mTable.vue"
import modalPage from "../modalPage.vue"
const modalShow = ref(false)
const titleData = [
  {
    name: "内容",
    key: "content",
    align: true,
    style: {
      flex: 1,
      textAlign: "left"
    }
  },
  {
    name: "类型",
    key: "appear_type",
    style: {
      width: "50px"
    }
  },
  {
    name: "状态",
    key: "state",
    style: {
      width: "50px"
    }
  },
  {
    name: "创建时间",
    key: "createtime",
    style: {
      width: "80px"
    }
  }

]
const pageRef = ref(null)
const pageChange = (e) => {
  searchData.page = e
  getTableList()
}
const total = ref(0)
const valueData = ref([])
const searchData = reactive({
  page: 1,
  pagesize: 5,
  organization_classify_id: ""
})
const getTableList = async () => {
  const res = await $api.get("/api/index/get_appeal_list", searchData)
  if (res.code === 1) {
    res.data.data.forEach(e => {
      if (e.is_solve === "1") {
        e.state = "待处理"
      } else if (e.is_solve === "2") {
        e.state = "已处理"
      } else if (e.is_solve === "3") {
        e.state = "处理中"
      } else if (e.is_solve === "4") {
        e.state = "已逾期"
      }
    })
    total.value = res.data.total
    valueData.value = res.data.data
  }
}

const data = ref(null)

const emit = defineEmits(["xfrw"])
const xfrw = (e) => {
  emit("xfrw", e)
}
const close = () => {
  modalShow.value = false
}
const show = (e) => {
  data.value = e
  searchData.organization_classify_id = e.id
  getTableList()
  modalShow.value = true
}
defineExpose({ show, close })
</script>
<style scoped lang="less">
.content {
  background: #4DDECF1A;
  padding: 10px 16px;
  border: 1px solid #4DDECF33;
  border-radius: 10px;
  color: #FFFFFF;
  width: 100%;

  .title {
    color: #d5f2ff;
    font-size: 14px;
    padding: 10px 0;
  }

  .item {
    display: flex;
    align-items: center;
    width: 120px;
    margin-right: 20px;
    margin-bottom: 10px;
    background-color: #00000066;
    padding: 5px 10px 5px 5px;
    border-radius: 99px;
  }
}

.titleBox {
  .title {
    color: #d5f2ff;
    padding: 10px;
    font-weight: 500;
    flex: 1;
  }

  .rightBox {
    padding-right: 50px;
    display: flex;
    align-items: center;

    .btn {
      background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
      border: 1px solid #57FFFF;
      color: #ffffff;
      font-size: 10px;
      padding: 2px 20px;
      border-radius: 99px;
      cursor: pointer;
      margin-left: 10px;
    }
  }

  .closeBox {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #a32438;
    padding: 2px 10px 2px 15px;
    font-size: 24px;
    border-radius: 0 8px 0 20px;
    cursor: pointer;

    .closeIcon {
      background-image: url('/img/myimg/close.png');
      background-size: 15px 15px;
      width: 15px;
      height: 15px;
    }
  }
}

.top {
  display: flex;
  width: 300px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;

  .top_item {
    flex: 1;
    padding: 3px 10px 3px 3px;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1E6579 100%);

    .top_item_name {
      font-size: 10px;
      color: rgba(213, 242, 255, 1);
      flex: 1;
    }

    .top_item_num {
      color: rgba(158, 247, 255, 1);
      font-weight: bold;
      font-size: 12px;
    }

    .top_item_leftIcon {
      background-image: url('/img/myimg/lefticon1.png');
      background-size: 17px 15px;
      width: 17px;
      height: 15px;
    }
  }
}
</style>
